<template>
    <div class="divBox">
      <el-card class="box-card">
        <div style="color: red;font-size: 22px;margin-bottom: 10px;">按照顺序添加，一次添加一个小程序，添加错误就要重新再来
        <el-button type="success" @click="submitSign">提交</el-button></div>
        <el-form
          v-for="(item, index) in list" :key="index"
          ref="form"
          :model="item"
          inline
          label-width="100px"
        >
          <el-form-item label="关联小程序">
            <el-select
              v-model="item.subAppId"
              clearable
              placeholder="请选择商家"
            >
              <el-option
                v-for="item in constants.wxList"
                :key="item.appid"
                :label="item.name"
                :value="item.appid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="item.title"> </el-input>
        </el-form-item>
          <el-form-item label="第几天">
            <el-input type="number" v-model.number="item.day"> </el-input>
          </el-form-item>
          <el-form-item label="积分">
            <el-input type="number" v-model.number="item.point"> </el-input>
          </el-form-item>
          <div  style="display: flex;">
            <el-form-item label="额外奖励" v-for="(ele, idx) in item.extraPoints" :key="idx">
              <div style="display: flex;">
                <el-select
                  v-model="ele.type"
                  clearable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="kok in typeList"
                    :key="kok.value"
                    :label="kok.name"
                    :value="kok.value"
                  >
                  </el-option>
                </el-select>
                <el-input type="number" v-model.number="ele.amount"> </el-input>
                <el-button  type="danger" @click="delExtra(item, index)">删除</el-button>
              </div>
            </el-form-item>
          </div>
          <el-button v-if="index > 0" type="danger" @click="delSign(index)">删除</el-button>
          <el-button type="primary" @click="addExtra(item)">添加额外</el-button>
          <el-button v-if="index  == list.length - 1" type="primary" @click="addSign">继续添加</el-button>
        </el-form>
      </el-card>
    </div>
  </template>
  <script>
  import { signSave } from "@/api/sign";
  export default {
    name: "SignSet",
    data() {
      return {
        constants: this.$constants,
        list: [
           {
            subAppId: '',
            point: null,
            title: '',
            day:null,
            extraPoints: [
            ]
          },
        ],
        typeList: [
          {
            name: '积分',
            value: 1
          },
          {
            name: '抽奖次数',
            value: 2
          },
        ]
      };
    },
    mounted() {
    },
    methods: {
      delSign(index) {
        this.list.splice(index, 1);
      },
      addSign() {
        this.list.push({
          subAppId: '',
          point: null,
          title: '',
          day:null,
          extraPoints: [
          ]
        })
      },
      delExtra(obj, index) {
        obj.extraPoints.splice(index, 1);
      },
      addExtra(item) {
        item.extraPoints.push({
            amount: null,
            type: 1,
            isShow: false
          })
      },
      async submitSign(){
        let obj = {
          msg: []
        }
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i]
          if (!item.subAppId) {
            obj.msg.push('小程序不能为空')
          }
          if (!item.point) {
            obj.msg.push('分数不能为空')
          }
          if (!item.title) {
            obj.msg.push('标题不能为空')
          }
          if (!item.day) {
            obj.msg.push('索引不能为空')
          }
        }
        if (obj.msg.length > 0) {
          this.$message.error(obj.msg[0])
          return
        }
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i]
          await signSave(item)
        }
        this.list = [
           {
            subAppId: '',
            point: null,
            title: '',
            day:null,
            extraPoints: []
          },
        ]
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .sub {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .question {
    width: 80%;
    .line {
      text-align: center;
    }
    .red {
      color: #ff0000;
    }
  }
  .bghui {
    background: #fafafa;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    .deleanswer {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 40px;
  
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      color: #fff;
      background: #ff0000;
      padding-left: 10px;
      border-radius: 40px 0 0 100px;
    }
    .answer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20px;
    }
    .ifsuccess {
      width: 100px;
      height: 36px;
      background: #bababa;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .successicon {
      background: green;
      color: #fff;
    }
  }
  </style>